<template>
  <div class="me">
    <div class="header-info">
      <div class="icon-header">
        <div class="iconfont icon-elemo"></div>
      </div>
      <div class="login">
        <p v-if="!userId" @click="$router.push('./login')">登录/注册</p>
        <p v-else>{{userId | fontNumber}}</p>
        <p><i class="iconfont icon-shouji"></i><span>{{phoneInfo}}</span></p>
      </div>
      <div class="iconfont icon-youjiantou1"> </div>
    </div>
    <div class="layout address" @click="handleAddress"><i class="iconfont icon-mark"></i>收货地址</div>
    <div class="layout" style="margin-top:.3rem;" @click="layout">退出登录</div>
  </div>
</template>
<script>
export default {
  name: 'me',
  data () {
    return {
      userId: '',
      phoneInfo: '登录后享受更多特权',
      address: []
    }
  },
  created () {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => vm.getData());
  },
  computed: {
  },
  methods: {
    getData () {
      const userId = localStorage.getItem('userId')
      const ele_login = localStorage.getItem('ele_login')
      this.$axios(`/api/user/user_info/${userId}`).then(res => {
        console.log(res.data);
        this.userInfo = res.data;
        if (ele_login == 'true') {
          this.userId = userId
          this.phoneInfo = res.data.phone
          this.address = res.data.myAddress
        }
      });
    },
    layout () {
      const ele_login = localStorage.getItem('ele_login')
      if (!ele_login) return
      localStorage.removeItem('ele_login')
      localStorage.removeItem('userId')
      this.$router.push('./home')
    },
    handleAddress () {
      const ele_login = localStorage.getItem('ele_login')
      console.log(ele_login);
      if (ele_login == null) {
        this.$router.push('./login')
        return false
      }
      this.address.length > 0 ? this.$router.push('./myAddress') : this.$router.push('./addAddress')
    }
  },
  filters: {
    fontNumber (date) {
      const length = date.length
      if (length > 8) {
        var str = ''
        str = date.substring(0, 15) + '...'
        return str
      } else {
        return date
      }
    }
  },
}
</script>
<style  scoped>
.header-info {
  display: flex;
  align-items: center;
  height: 3rem;
  background-color: #029efe;
}
.icon-elemo {
  font-size: 2rem;
  color: #ffdcad;
  overflow: hidden;
}
.icon-header {
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 50%;
  margin-left: 0.3rem;
}
.login {
  color: #fff;
  margin-left: 0.5rem;
}
.login p:nth-child(1) {
  font-size: 0.6rem;
}
.login p:nth-child(2) {
  margin-top: 0.2rem;
  font-size: 0.2rem;
  color: rgb(252, 249, 243);
}
.icon-shouji {
  font-size: 0.2rem;
}
.icon-youjiantou1 {
  margin-left: auto;
  padding-right: 0.3rem;
  color: #fff;
  font-size: 0.2rem;
}
.layout {
  border-bottom: 0.05rem solid #ccc;
  height: 1.3rem;
  background-color: #fff;
  text-align: center;
  line-height: 1.3rem;
  font-size: 0.4rem;
  color: rgb(243, 25, 25);
}
.address {
  color: #1d1e1f;
  font-size: 0.4rem;
  margin-top: 0.3rem;
}
.icon-mark {
  color: #029efe;
}
</style>
